<template>
<div>
<div  class="card" >
			<a href="#" v-for="book in booklist" :key="book.id"  @click.prevent="enterPage(book.id)">
				<img class="image" :src="book.bookcover"   />
			</a>
            <!-- <a href="#" target="_blank">
				<img class="image" :src="src2" />
			</a> -->
</div>
</div>
</template>

<script>
import axios from 'axios'
export default {
    name:'HomePage',
    data() {
      return {
          booklist:[
          ]
      }
    },
    mounted(){
       axios.get('http://124.71.213.104/api/books').then(
            response => {
                
                this.booklist={...response.data}
            },
             error => {
                 console.log(error.message)
             }
        )

    },
    methods:{
        enterPage(){
            this.$router.push({
                path:'/enterPage',

            })
            axios.get().then(
                response => {
                    // console.log("123"+"123");
                    this.$bus.$emit('emitData',response.data.data)
                },
                error => {
						//请求后更新List的数据
						this.$bus.$emit('emitData',error.message)
					}
            )
            
        }
    }


}
</script>

<style scoped>


	.card {
		height: 750px;
		margin: 90px;
        border-radius: 20px;
		border: 5px solid #efefef;
		
	}
    .image {
        float:left;
        height: 300px;
        width:16%;
        margin: 40px 0px 10px 40px;
        box-shadow: 10px 10px 10px grey


    }

	
</style>